<template>
  <div class="app-container">

    <div class="el-row">
      <el-button type="primary" @click="openAddVisible">添加商品</el-button>
      <el-button type="danger" @click="delBatch">批量删除</el-button>
    </div>
    <div class="row">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="formInline.name" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="所在分类:">
          <!--上海市的区域-->
          <el-select v-model="categoryInfo" placeholder="请选择">
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            >
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

    </div>

    <!--清洁人员列表-->
    <div class="el-row">
      <el-table
        @selection-change="selectionCheckBox"
        :data="productionVoList"
        style="width: 100%">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="productionId"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="productionName"
          label="名称"
          width="180">
        </el-table-column>

        <el-table-column
          prop="productionPrice"
          label="价格"
          width="180">
        </el-table-column>

        <el-table-column
          prop="productionQuantity"
          label="数量"
          width="180">
        </el-table-column>

        <el-table-column
          label="分类"
          width="180">
          <template slot-scope="scope">
            <span v-for="item in categoryList" v-if="item.categoryId == scope.row.categoryId" v-text="item.categoryName"></span>
          </template>
        </el-table-column>


<!--        <el-table-column
          label="图片"
          width="180"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px;border-radius: 10%"
              v-for="item in scope.row.imageList"
              :src="scope.row.clrImg"
              :fit="fit"></el-image>
          </template>

        </el-table-column>-->
<!--        <el-table-column
          label="状态"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.clrState == 1">在职</span>
            <span v-if="scope.row.clrState == 0">离职</span>
          </template>
        </el-table-column>-->
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope"
          >
            <el-button
              size="mini"
              type="primary"
              @click="openEditVisible(scope.row.productionId)"
            >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div><!--分页导航栏-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 8, 16]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--模态框-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="editVisible"
        width="30%"
        :before-close="closeEditVisible">


        <!--修改信息-->
        <el-form ref="form" :model="editProductionForm" label-width="80px">
          <el-form-item label="商品名称:">
            <el-input v-model="editProductionForm.productionName" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="商品价格:">
            <el-input v-model="editProductionForm.productionPrice" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="商品数量:">
            <el-input v-model="editProductionForm.productionQuantity" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="商品简介:">
            <el-input v-model="editProductionForm.productionIntroduction" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="所属分类">
            <el-select v-model="editProductionForm.categoryId" placeholder="请选择分类">
              <el-option v-for="item in categoryList"
                         :key="item.categoryId"
                         :label="item.categoryName"
                         :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="头像上传">
            <el-upload
              class="avatar-uploader"
              :action="'http://localhost:8087/production/uploadImg?id='+editProductionForm.productionId"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="myHeader">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>

          <el-form-item>
            <el-button @click="closeEditVisible">取 消</el-button>
            <el-button type="primary" @click="submitEdit">确 定</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"></span>
      </el-dialog>
    </div>

    <!--模态框-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="addVisible"
        width="30%"
        :before-close="closeAddVisible">


        <!--新增信息-->
        <el-form ref="form" :model="addProductionForm" label-width="80px">
          <el-form-item label="商品名称:">
            <el-input v-model="addProductionForm.productionName" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="商品价格:">
            <el-input v-model="addProductionForm.productionPrice" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="商品数量:">
            <el-input v-model="addProductionForm.productionQuantity" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="商品简介:">
            <el-input v-model="addProductionForm.productionIntroduction" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="所属分类">
            <el-select v-model="addProductionForm.categoryId" placeholder="请选择分类">
              <el-option v-for="item in categoryList"
                         :key="item.categoryId"
                         :label="item.categoryName"
                         :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="头像上传">
            <el-upload
              class="avatar-uploader"
              :action="'http://localhost:8087/production/uploadImg'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
              name="myHeader">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>

          <el-form-item>
            <el-button @click="closeAddVisible">取 消</el-button>
            <el-button type="primary" @click="submitAdd">确 定</el-button>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
    </div>
    <!--模态框-->
  </div>
</template>

<!--清洁人员列表-->
<script>
import {
  categoryList,
  searchProduction,
  deleteMoreByIds,
  searchOneProduction,
  addOneProductionInfo,
  editOneProductionInfo,
} from "@/api/productionApi/productionApi";

export default {
  data() {
    return {

      addVisible: false,
      editVisible: false,
      fit: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      pageNum: 1,
      pageSize: 2,
      total: 0,
      categoryInfo: '',
      categoryList:[],
      productionVoList:[],
      ids: [],
      imageUrl: '',
      imageUrl2:'',
      imageList: [],
      formInline: {
        name: ''
      },
      editProductionForm: {
        productionId: '',
        productionName: '',
        productionPrice: '',
        productionQuantity: '',
        productionIntroduction: '',
          categoryId: '',
        image:'',
        imageId: ''
      },
      addProductionForm: {
        productionName: '',
        productionPrice: '',
        productionQuantity: '',
        productionIntroduction: '',
          categoryId: '',
        image:''
      },

    }
  },
  methods: {
    submitAdd() {
      addOneProductionInfo(this.addProductionForm)
      this.closeAddVisible();
      this.onSubmit();
    },
    closeAddVisible() {
      this.addVisible = false;
    },
    openAddVisible() {
      this.addVisible = true;
    },
    handleAvatarSuccess(res, file) {
      console.log(res.data)
      console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.editProductionForm.image = "http://139.224.186.148:10001/imgs/" + res.data.filename;
    },

    handleAvatarSuccess2(res, file) {
      console.log(res.data)
      console.log(file)
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.addProductionForm.image = "http://139.224.186.148:10001/imgs/" + res.data.filename;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    submitEdit() {
      editOneProductionInfo(this.editCleanerForm).then((res) => {
        console.log(res)
      })
      this.closeEditVisible();
      this.onSubmit();
    },
    closeEditVisible() {
      this.editVisible = false;
    },

    openEditVisible(id) {
      searchOneProduction({id: id}).then((res) => {

        this.editProductionForm = res.data.productionVo;

      })

      this.imageList = this.editProductionForm.imageList;
      this.editVisible = true;
    },
    selectionCheckBox(arr){
      this.ids = [];
      for (let o of arr){
        this.ids.push(o.productionId);
      }
    },
    delBatch() {

      if (this.ids.length > 0){
        deleteMoreByIds({ids: this.ids+""}).then((res)=>{
          alert(res.data.ok)
        })

      }else {
        alert("请至少选中一条数据")
      }

    },
    handleSizeChange(size) {
      this.pageNum = 1;
      this.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange(now) {
      this.pageNum = now;
      this.onSubmit();
    },

    /*多条件查询*/
    onSubmit() {
      searchProduction({
        categoryInfo: this.categoryInfo,
        name: this.formInline.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        console.log(res.data)
        this.productionVoList = res.data.list.list;
        this.pageNum = res.data.list.pageNum;
        this.pageSize = res.data.list.pageSize;
        this.total = res.data.list.total;
      })
    },

    initCategoryList(){
      categoryList().then((res) => {
        this.categoryList = res.data.list;
      })
    },

  },
  created() {
    this.onSubmit();
    this.initCategoryList();
  },

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped>

</style>
